<template>
  <view class="component">
    <view :class="`text-check-item ${data.checked ? 'item-text-checked' : ''}`" :bind="computedAttrs" @tap="handleClick">
        <text class="text">{{ data.text }}</text>
        <text class="icon iconfont icon-a-32_32_check"></text>
      </view>
  </view>
</template>

<script setup>
import { type } from '@/uni_modules/uni-forms/components/uni-forms/utils';



const props = defineProps({
  data: Object, // 数据
  config: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const injectOperateFn = inject('operate');
const handleClick = () => {
  console.log("🚀 组件 textChecked ~ handleClick ~ handleClick:", props.data)
  // console.log('props.data', props.data, 'computedAttrs.data', computedAttrs, computedAttrs.value, computedAttrs.data);
  
  // emit('selected', computedAttrs.value.data);
  
  // 事件selected， 数据
  injectOperateFn('selected', props.data)

}



watchEffect(() => {
  console.log('watchEffect TextChecked data', data);
  
})

</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";

.text-check-item {
  font-size: 26rpx;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    font-size: 26rpx;
  }
  .icon {
    visibility: hidden;
  }
  &.item-text-checked {
    color: $primary-color;

    .icon {
      visibility:visible;
    }
  }
}
</style>